import {
  Component,
  PropTypes
} from 'labrador-immutable';

// 验证数据类型
const {
  string,
  bool,
  func
} = PropTypes;

/**
  1、函数式定义的无状态组件
  在大部分React代码中，大多数组件被写成无状态的组件，通过简单组合可以构建成其他的组件等；
  这种通过多个简单然后合并成一个大应用的设计模式被提倡。

  2、es5原生方式
  React.createClass

  3、es6原生方式
  extends React.Component
*/

// const Todo = (props) => {
//
//   // 初始化时调用
//   const state = {
//     icon: props.finished ? 'success_circle' : 'circle',
//     className: props.finished ? 'todo-finished' : ''
//   };
//
//   handleRemove() {
//     this.props.onRemove(this.props.id);
//   }
//
//   handleFinish() {
//     if (this.props.finished) {
//       this.props.onRestore(this.props.id);
//     } else {
//       this.props.onFinish(this.props.id);
//     }
//   }
// }
//
// Todo.propTypes = {
//   id: string,
//   title: string,
//   createdAt: string,
//   finished: bool,
//   finishedAt: string,
//   onRemove: func,
//   onRestore: func,
//   onFinish: func
// };
//
// export default Todo;

/*
  自定义组件的逻辑代码和微信框架中的page很相似
  最大的区别是在js逻辑代码中，没有调用全局的 Page() 函数声明页面
  而是用 export 语法导出了一个默认的类，这个类必须继承于 Component 组件基类。

  Labrador自定义组件扩展了 propTypes 、 defaultProps 、 onUpdate()、setState() 、 children() 等方法和属性
  children()方法返回当前组件中的子组件集合
**/
export default class DemoView extends Component {

  // 验证数据类型
  // 为优化性能，只有在开发环境下才会自动检测props值类型。
  // static propTypes = {
  //
  // };

  // 当前组件默认的各项参数值
  static defaultProps = {
    title: '我是props'
  };

  state = {
    title: "我是state"
  };


  // 生命周期函数
  /*
    生命周期函数--初始化state
  **/
  constructor(props) {
    super(props);
    this.state = {
      title: "我是state"
        // icon: props.finished ? 'success_circle' : 'circle',
        // className: props.finished ? 'todo-finished' : ''
    };
  }

  /**
    生命周期函数--监听页面加载
  */
  onLoad(props) {
    // 一个页面只会调用一次
    // 接收页面参数可以获取wx.navigateTo和wx.redirectTo及<navigator/>中的 query。
  }

  /**
    生命周期函数--监听页面初次渲染完成
  */
  onReady(props) {
    // 一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。
    // 对界面的设置如wx.setNavigationBarTitle请在onReady之后设置。
  }

  /**
    生命周期函数--监听页面显示
  */
  onShow(props) {
    // 每次打开页面都会调用一次。
  }

  /**
    生命周期函数--监听页面隐藏
  */
  onHide(props) {
    // 当navigateTo或底部tab切换时调用。
  }

  /**
    生命周期函数--监听页面卸载
  */
  onUnload(props) {
    // 当redirectTo或navigateBack的时候调用。
  }

  // 页面相关事件处理函数
  /**
    页面相关事件处理函数-监听用户下拉刷新
  */
  onPullDownRefresh(props) {
    // 监听用户下拉刷新事件。
    // 需要在config的window选项中开启enablePullDownRefresh。
    // 当处理完数据刷新后，wx.stopPullDownRefresh可以停止当前页面的下拉刷新。
  }

  /**
    页面相关事件处理函数-监听用户上拉触底
  */
  onReachBottom(props) {

  }

  // Labrador监听函数
  // props更新
  onUpdate(props) {
    // 当组件的 props 发生变化后被调用
    // 类似React.js中的 componentWillReceiveProps
    // 所以我们可以在此函数体内监测 props 的变化。

    // 组件向模板传值需要调用 setState 方法
    /*
      0.6版本后，Component 基类中撤销了 setData 方法，新增了 setState 方法。
      这样做并不是仅仅为了像React.js，
      而是在老版本中，我们将所有组件树的内部状态数据和props全存放在page.data中，
      在组件更新时产生了大量的 setData 递归调用，为了优化性能，必须将组件树的状态和 page.data 进行了分离。
    **/
    this.setState({
      title: "我是state"
        // icon: props.finished ? 'success_circle' : 'circle',
        // className: props.finished ? 'todo-finished' : ''
    });
  }

  // handleRemove() {
  //   this.props.onRemove(this.props.id);
  // }
  //
  // handleFinish() {
  //   if (this.props.finished) {
  //     this.props.onRestore(this.props.id);
  //   } else {
  //     this.props.onFinish(this.props.id);
  //   }
  // }
}
